<template>
    <div class="height-100 width-100 login-box flex-center position-relative" ref="vantaRef">
        <div class="login-title position-absolute font-size-40 color-fff animate__animated animate__bounceInRight">
            <kinesis-container>
                <kinesis-element :strength="20"> 中塔智管家后台登录系统 </kinesis-element>
            </kinesis-container>
        </div>
        <div class="auto-box flex flex flex-direction-column animate__animated animate__backInDown">
            <h1 class="font-size-32 color-fff flex-center" style="letter-spacing: 0.6rem;">登录</h1>
            <div class="margin-t-40">
                <el-form :model="ruleForm" :rules="rules" ref="ruleFormRef" class="demo-ruleForm" size="large">
                    <el-form-item label="" prop="accountName">
                        <el-input v-model.trim="ruleForm.accountName" placeholder="请输入用户名" maxLength="11">
                            <template #prepend> <el-icon :size="20">
                                    <User />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="" prop="password">
                        <el-input v-model.trim="ruleForm.password" placeholder="请输入密码" type='password' show-password>
                            <template #prepend>
                                <el-icon :size="20">
                                    <Lock />
                                </el-icon>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>

                    </el-form-item>
                    <el-form-item>
                        <el-button v-wave :loading="loading" class="width-100" type="primary" @click="submitForm('ruleForm')"
                            @keydown.enter="keyDown()">立即登录</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script setup>
import { KinesisContainer, KinesisElement } from "vue-kinesis";
import { ElMessage, ElNotification } from 'element-plus'
import { apiPostLoginChange } from "@/api/login/login.js"
import { useStore } from '@/store/index'//引入store
import * as THREE from "three";
import NET from "vanta/src/vanta.net";


const store = useStore();
const router = useRouter();
// 控制按钮loading显示
const loading = ref(false)

let ruleFormRef = ref(null)

// 表单
const ruleForm = ref({
    accountName: 'admin',//用户名
    password: "123456",// 密码
    terminal: "Web"
})

// 表单验证
const rules = ref({
    accountName: [
        { required: true, message: '请输入用户名', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入登录密码', trigger: 'blur' },
        { min: 6, message: '密码长度不能少于6位', trigger: 'blur' },
        {
            validator: (rule, value) => {
                if (value && /[\u4e00-\u9fa5]/.test(value)) {
                    return Promise.reject('密码不能包含中文字符');
                }
                return Promise.resolve();
            },
            trigger: 'blur',
        },
    ],
})

// 登录按钮
function submitForm() {
    ruleFormRef.value.validate((valid, fields) => {
        if (valid) {
            store.setToken('')
            loading.value = true
            apiPostLoginChange(ruleForm.value, '登录中').then(res => {
                if (res.success) {
                    store.setToken(res.data) //设置token
                    store.getUserInfo('/adminLogin')//获取用户信息
                }
            }).finally(() => {
                loading.value = false
            })
            return false
        }
        const firstValue = Object.values(fields)[0];
        ElMessage({
            message: firstValue[0].message,
            type: 'warning',
        })
    });
}

//点击回车键登录
const keyDown = (e) => {
    if (e.keyCode == 13 || e.keyCode == 100) {
        submitForm('ruleForm')
    }
}

onMounted(() => {
    //绑定监听事件
    window.addEventListener('keydown', keyDown)
    bgChange()
});
onUnmounted(() => {
    //销毁事件
    window.removeEventListener('keydown', keyDown, false)
    if (vantaEffect.value) {
        setTimeout(() => {
            // vantaEffect.value.destroy();
        }, 500)
    }
});


const vantaEffect = ref(null)
const vantaRef = ref(null)
// 实现动态背景 有点影响性能
async function bgChange() {
    vantaEffect.value = NET({
        el: vantaRef.value,
        THREE: THREE,
    });
    VANTA.NET({
        el: vantaRef.value,
        /*以下为样式配置*/
        mouseControls: true,
        touchControls: true,
        gyroControls: false,
        minHeight: 200.0,
        minWidth: 200.0,
        scale: 1.0,
        scaleMobile: 1.0,
        color: 0xc7d1e8,
        backgroundColor: '#2d3a4b',
        points: 13.0,
        maxDistance: 21.0,
        spacing: 16.0,
    });
}

</script>

<style lang="scss">
.login-box {
    .auto-box {
        .el-input-group__prepend {
            padding: 0 10px !important;
        }
    }
}
</style>

<style lang='scss' scoped>
.login-box {
    -webkit-user-select: none; /* Chrome, Safari, Opera */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    background: #2d3a4b;
    overflow: hidden;

    .login-title {
        top: 5%;
        left: 3%;
        letter-spacing: 0.5rem;
    }

    .auto-box {
        width: 400px;
        // padding: 50px 30px;
        // background: #2d3a4b;
        // box-shadow: 0 0 20px 5px #7d7d7d;
        // border-radius: 10px;
    }
}
</style>